<template>
  <div class="container-widget" ref="container" :cid="cid">
    <div class="container-widget-body">
      <div class="empty" v-if="components.length < 1">可拖入多个组件</div>
      <div class="kw-dragging-mark" v-if="curIndex===0"></div>
      <div v-for="(item, index) in components" :key="index">
        <draggable v-bind:class="['kw-component-' + item.type, item.selected?'active':'', item.draging?'draging':'']"
                   :data-index="index" :cid="item.cid"
                   @on-mousedown="(e)=>{mouseDown(e, item, index)}"
                   @on-dragstart="(e)=>{moveStart(e, item, index)}">
          <div class="kw-remove iconfont icon-close" @click="(e)=>{close(e, item, index)}"></div>
          <div class="kw-overlay"></div>
          <component :is="component(item)" :item="item"
                     @on-mousedown="(e)=>{mouseDown(e, item, index)}"
                     @on-dragstart="(e)=>{moveStart(e, item, index)}"
                     @on-close="(e)=>{close(e, item, index)}"
                     @on-update="(cps)=>{handlerOnUpdate(item, cps)}">
          </component>
        </draggable>
        <div class="kw-dragging-mark" v-if="curIndex===index+1"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    MOVE_START_EVENT,
    SELECT_COMPONENT_EVENT,
    CHANGE_TAB_EVENT
  } from '../common/event'
  import Draggable from '../components/draggable'
  import { containerMixin } from '../mixins/widget'

  export default {
    name: 'container-widget',
    components: {
      Draggable
    },
    mixins: [containerMixin],
    data() {
      return {
        defaultWidget: 'text-widget'
      }
    },
    computed: {
      component() {
        return function (item) {
          let config = Object.assign({}, {component: item.component || this.defaultWidget})
          return config.component
        }
      }
    },
    methods: {
      hover(e) {
        e.stopPropagation()
        e.preventDefault()
        e.currentTarget.classList.add('hover')
      },
      mouseOut(e) {
        e.stopPropagation()
        e.preventDefault()
        e.currentTarget.classList.remove('hover')
      },
      close(e, item, index) {
        e.preventDefault()
        e.stopPropagation()
        let dom = e.currentTarget.parentNode
        this.components.splice(index, 1)
        if (dom.className.indexOf('active') > 0) {
          this.$root.EventBus.$emit(CHANGE_TAB_EVENT, false)
        }
      },
      mouseDown(e, item) {
        e.stopPropagation()
        e.stopPropagation()
        if (!item.selected) {
          this.$set(item, 'selected', true)
          this.$root.EventBus.$emit(SELECT_COMPONENT_EVENT, item)
          this.$root.EventBus.$emit(CHANGE_TAB_EVENT, true)
        }
      },
      moveStart(e, component) {
        e.preventDefault()
        e.stopPropagation()
        let obj = {}
        let dom = e.currentTarget
        let actualTop = dom.offsetTop
        let actualLeft = dom.offsetLeft
        let current = dom.offsetParent
        while (current !== null) {
          actualTop += current.offsetTop
          actualLeft += current.offsetLeft
          current = current.offsetParent
        }
        obj.clientX = e.clientX
        obj.clientY = e.clientY
        obj.componentView = component
        obj.type = component.type
        obj.text = component.name
        this.$set(component, 'draging', true)
        this.$root.EventBus.$emit(MOVE_START_EVENT, Object.assign(obj, {left: actualLeft, top: actualTop}))
      },
      handlerOnUpdate(component, children) {
        component.children = children
      }
    }
  }
</script>

<style lang="less">
  .container-widget {
    .container-widget-body {
      margin: 1rem;
      border: 1px dashed #c0ccda;
      background-color: #ddeff3;
      min-height: 120px;
      overflow: auto;
      .empty {
        position: absolute;
        left: 50%;
        top: 50%;
        white-space: nowrap;
        color: #ccc;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    }
  }
</style>